<template>
  <details-layout
    class="tool-details"
    :class="data.代码"
    :data="data"
    :related="related"
    channel="tools"
    moreUrl="/tools"
    contentField="描述"
    titleField="标题"
    dateField="日期">
    <!-- <div class="title text-center">{{data.标题}}</div>
    <div class="info row no-wrap relative-position justify-end">
      <div class="type absolute-center">{{$t('类型')}}: {{data.类型}}</div>
      <div class="date">{{data.日期 | normalDate}}</div>
    </div> -->
    <div class="details relative-position overflow-hidden" style="min-height: 300px;">
      <div
        class="absolute-center"
        style="top: 140px;font-size:24px;"
        v-if="loading">{{$t('正在加载工具页面，请稍候……')}}</div>

      <!-- <transition
        appear
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      > -->
      <iframe
        :src="`${data.地址}?uid=${userID}`"
        frameborder="0"
        :height="loading ? '0px' : '1300px'"
        width="1440px"
        @load="toolPageLoaded"></iframe>
      <!-- </transition> -->
    </div>
  </details-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnIDChange } from '../../components/mixins/data';
import DetailsLayout from '../../components/detailsLayout.vue';

export default {
  name: 'ToolsDetails',
  mixins: [mixins.ObjectDataMixin, RefreshOnIDChange],
  components: {
    DetailsLayout,
  },
  data() {
    return {
      related: [],
      loading: true,
    };
  },
  computed: {
    userID() {
      if (this.ctx.modules.passport
        && this.ctx.modules.passport.store.state.passport.user
        && this.ctx.modules.passport.store.state.passport.user.id) {
        return this.ctx.modules.passport.store.state.passport.user.id;
      }

      return '000';
    },
    // iframeWidth() {
    //   const widthList = {
    //     'AdvNN-W': '1440px',
    //     ExpNN: '1300px',
    //   };

    //   return widthList[this.data.代码] || '1220px';
    // },
  },
  created() {
    this.getRequest(`/portal/tools/related/${this.$route.params.id}`, { limit: 5 }).then((d) => {
      if (d && d.msg === 'OK') {
        this.related = d.data.docs;
      }
    });
  },
  methods: {
    toolPageLoaded() {
      setTimeout(() => {
        this.loading = false;
      }, 3000);
    },
  },
};
</script>

<style lang="scss" scoped>
.tool-details {
  .details {
    margin: 0 !important;
  }
}
</style>

<style lang="scss">
.tool-details {
  .details-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 1440px !important;
  }
}
</style>
